<template>
  <div class='homeDiv' v-loading='loading'>

    <div class="block">
      <el-carousel height="250px">
        <el-carousel-item v-for="item in imgUrls">
          <img src='../assets/imgs/l1.png' width="100%">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="banner">
      <div style="text-align: center;font-size: 30px;">程序员面试宝典</div>
      <div style="text-align: center;font-size: 18px;color: #aaa">综合训练+专项训练,全面提高专业技能，增强面试通过率</div>
      <div style="border-bottom:1px solid #ccc;"></div>
      <div style="width: 80%;height:80%;margin: 0 auto;">
        <router-link :to='{name:"SubjectPath",params:{id:1}}'>
          <div class="pane">
            <div style="text-align: center;margin-top: 50px;font-size: 14px">java面试训练</div>
            <div style="width: 100px;height: 100px;margin: 0 auto;background-color: #5daf34">
              <img src="../assets/imgs/java.jpg" width="100px" height="100px"/>
            </div>
          </div>
        </router-link>
        <router-link :to='{name:"SubjectPath",params:{id:2}}'>

          <div class="pane">
            <div style="text-align: center;margin-top: 50px">数据库面试训练</div>
            <div style="width: 100px;height: 100px;margin: 0 auto;background-color: #5daf34">
              <img src="../assets/imgs/database.jpg" width="100px" height="100px"/>
            </div>
          </div>
        </router-link>
        <router-link :to='{name:"SubjectPath",params:{id:3}}'>
          <div class="pane">
            <div style="text-align: center;margin-top: 50px">网页设计面试训练</div>
            <div style="width: 100px;height: 100px;margin: 0 auto;background-color: #5daf34">
              <img src="../assets/imgs/html.jpeg" width="100px" height="100px"/>
            </div>
          </div>
        </router-link>
        <router-link :to='{name:"SubjectPath",params:{id:4}}'>
          <div class="pane">
            <div style="text-align: center;margin-top: 50px">python</div>
            <div style="width: 100px;height: 100px;margin: 0 auto;background-color: #5daf34">
              <img src="../assets/imgs/python.jpeg" width="100px" height="100px"/>
            </div>
          </div>
        </router-link>
        <div class="pane">
          <div style="text-align: center;margin-top: 50px">ios面试训练</div>
          <div style="width: 100px;height: 100px;margin: 0 auto;background-color: #5daf34">
            <img src="../assets/imgs/ios.jpg" width="100px" height="100px"/>
          </div>
        </div>
        <div class="pane">
          <div style="text-align: center;margin-top: 50px">android面试训练</div>
          <div style="width: 100px;height: 100px;margin: 0 auto;background-color: #5daf34">
            <img src="../assets/imgs/android.jpg" width="100px" height="100px"/>
          </div>
        </div>
        <div class="pane">
          <div style="text-align: center;margin-top: 50px">php面试训练</div>
          <div style="width: 100px;height: 100px;margin: 0 auto;background-color: #5daf34">
            <img src="../assets/imgs/php.jpeg" width="100px" height="100px"/>
          </div>
        </div>
        <div class="pane">
          <div style="text-align: center;margin-top: 50px">c/c++面试训练</div>
          <div style="width: 100px;height: 100px;margin: 0 auto;background-color: #5daf34">
            <img src="../assets/imgs/c.jpeg" width="100px" height="100px"/>
          </div>
        </div>

      </div>
    </div>
    <div class="foot">
      <div class="foor-main">
        <div style="font-size: 22px;color: #FFFFFF">
          程序员面试宝典
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        imgUrls: ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1517242996731&di=41870d6f5474fc7480e2650c731ec4e1&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F10%2F57%2F50%2F93b1OOOPIC4d.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1517242996731&di=41870d6f5474fc7480e2650c731ec4e1&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F10%2F57%2F50%2F93b1OOOPIC4d.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1517242996731&di=41870d6f5474fc7480e2650c731ec4e1&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F10%2F57%2F50%2F93b1OOOPIC4d.jpg',
          '../assets/toux.jpeg'
        ],
        loading: false
      }
    }
  }
</script>

<style scoped>
  .homeDiv {
    padding: 0;
    box-sizing: border-box;
    border: none;
    background-color: #ffffff;
    display: block;
    margin-left: 5%;
    margin-right: 5%;
  }

  .banner {
    background-color: #eeeeee;
    height: 600px;
  }

  .pane {
    width: 200px;
    height: 200px;
    background-color: #ffffff;
    margin-left: 30px;
    margin-top: 20px;
    float: left;
  }

  .foot {
    background-color: #3d444c;
    weight: 100%;
    height: 200px;
    clear: both;
  }

  .foor-main {
    width: 70%;
    /*background-color: #eeeeee;*/
    height: 80%;
    margin: 0 auto 0 auto;
    display: block;
    padding-top: 20px;
  }
</style>

